<template>
  <view class="cashier_container">
    <view class="price">
      <text>￥{{ order.flowPrice }}</text>
      <text>应付款金额</text>
    </view>

    <view class="orderPriceInfo">
      <text class="title">订单详情</text>
      <view class="item"><text>商品总金额</text><text>￥{{ order.goodsPrice }}</text></view>
      <view class="item"><text>运费</text><text>￥{{ order.freightPrice }}</text></view>
    </view>

    <view class="wallet" v-if="walletBalance.name">
      <text class="title">余额支付</text>
      <label class="item" @click="selectCheck(walletBalance)">
        <image :src="walletBalance.icon" mode="aspectFit"></image>
        <text>{{ walletBalance.name }}￥{{ walletBalance.balance }}</text>
        <checkbox :checked="walletBalance.checked" class="checkbox" />
      </label>
    </view>

    <view class="paymentMethod">
      <text class="title">其他支付方式</text>
      <!-- #ifndef MP-TOUTIAO -->
      <text class="unable-pay" v-if="payStatus" @click="unableToPay()">无法支付？</text>
      <!-- #endif -->
      <label v-for="(item, index) in paymentMethod" :key="index" class="item"
        @click="selectCheck(item)">
        <image :src="item.icon" mode="aspectFit"></image>
        <text>{{ item.name }}</text>
        <checkbox :checked="item.checked" class="checkbox" />
      </label>
    </view>

    <!-- <view style="height:128rpx" v-if="selectPayMethod!=='WECHAT'"></view> -->
    <!-- #ifndef MP-TOUTIAO -->
    <view class="payment-on-behalf" v-if="thirdPay" @click="selectThirdPay()">
      <text>找人代付</text>
      <checkbox :checked="paymentOnBehalf" class="checkbox" />
    </view>
    <!-- #endif -->

    <view class="payment-on-behalf" v-if="selectPayMethod === 'WECHAT' && !thirdPay"
      @click="getQrCode()">
      <text>找人代付</text>
      <image :src="staticUrl() + '/carts/qrCodeUrl.png'"></image>
    </view>

    <view class="QrCode" v-if="qrCodeStatus" @click.stop="qrCodeStatus = false">
      <view class="QrCode_bg" @click.stop="clickQrCode_bg()" v-if="paymentType === 'ALIPAY'">
        <image :src="QrCodeUrl"></image>
        <view class="text" @click.stop="preservation()">
          打开支付宝扫码支付
          <image :src="staticUrl() + '/carts/qrCodeDownload.png'"></image>
        </view>
      </view>
      <view class="QrCode_bg" @click.stop="clickQrCode_bg()" v-else>
        <image :src="QrCodeUrl"></image>
        <view class="text" @click.stop="preservation()">
          保存付款码
          <image :src="staticUrl() + '/carts/qrCodeDownload.png'"></image>
        </view>
      </view>
    </view>

    <view class="paymentButton" @click="toPay"> 支付金额￥{{ order.flowPrice }} </view>

    <view class="use" v-if="status">
      <!-- 支付密码 -->
      <view class="paymentPassword" v-if="selectPayMethod === 'WALLET'">
        <view class="title">
          <text>请输入支付密码</text>
          <img :src="staticUrl() + '/home/close.png'" @click=";(status = false), (password = [])" />
        </view>

        <view class="payable">
          ￥<text>{{ order.flowPrice }}</text>
        </view>

        <view class="password" @click="clickOther">
          <view>
            <text v-if="!password[0]"></text>
            <text class="dot" v-else></text>
          </view>
          <view>
            <text v-if="!password[1]"></text>
            <text class="dot" v-else></text>
          </view>
          <view>
            <text v-if="!password[2]"></text>
            <text class="dot" v-else></text>
          </view>
          <view>
            <text v-if="!password[3]"></text>
            <text class="dot" v-else></text>
          </view>
          <view>
            <text v-if="!password[4]"></text>
            <text class="dot" v-else></text>
          </view>
          <view>
            <text v-if="!password[5]"></text>
            <text class="dot" v-else></text>
          </view>
        </view>

        <view class="confirmPayment" @click="confirmPayment"> 确认支付 </view>
        <input type="number" class="input" :focus="focus" maxlength="6" @input="getInput" />
      </view>

      <!-- 对公转账 -->
      <view class="bankTransfer" v-if="selectPayMethod === 'BANK_TRANSFER'">
        <view class="title">
          <text>对公转账</text>
          <img :src="staticUrl() + '/home/close.png'" alt="" @click="status = false" />
        </view>
        <view class="accountName">公&emsp;司：
          <text>{{ bankCard.accountName }}</text>
        </view>
        <view class="subbranch">开户行：
          <text>{{ bankCard.subbranch }}</text>
        </view>
        <view class="account">账&emsp;号：
          <text>{{ bankCard.account }}</text>
        </view>
        <view class="btn">
          <text @click="transferred">已转账</text>
          <text @click="status = false">取消</text>
        </view>
      </view>
    </view>
    <!-- 无法支付弹窗 -->
    <view class="unable-pay-popup" v-if="isShowUnablePayPopup">
      <view class="overlay" @click="isShowUnablePayPopup = false"></view>
      <view class="content">
        <!-- 弹出层内容，可以根据需要自定义 -->
        <view class="title"> 无法支付 ? </view>
        <view class="pay-method">
          <view class="pay-list">
            <view class="tips"> *部分手机无法支付，可选择此通道支付 </view>
            <view class="list" v-for="(item, index) in paymentMethod1" :key="index"
              @click="selectCheckOrgin(item)">
              <view class="item">
                <image :src="item.icon" mode="aspectFit"></image>
                <text>{{ item.name }}</text>
                <checkbox :checked="item.checked" class="checkbox" />
              </view>
            </view>
          </view>
          <view class="btn" @click="payAgain"> 支付 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getPayMode,
  payment,
  transferAccountsRemind,
  paySuitable,
  paySuitable1
} from '@/api/carts/index.js'
import { orderDetails } from '@/api/order/index.js'
import { wechatPayment, setQrCode, polymerizationPay } from '@/api/payment/index.js'
import { bindWechat, getWechatCode } from '@/api/login/wechat.js'
import wxQrcode from '@/utils/wxqrcode.js'

import { getAllRequest } from '@/api/1.js'

export default {
  data () {
    return {
      payStatus: false, //支付状态  ture 支付成功  false 支付失败
      isShowUnablePayPopup: false,
      selectOriginalPayMethod: '',
      sn: '',
      order: {
        flowPrice: '',
        goodsPrice: '',
        freightPrice: ''
      },
      walletBalance: {},
      paymentMethod: [],
      paymentMethod1: [],
      selectPayMethod: '',
      selectPayMethod1: '',
      serviceType: '',
      paymentType: '',
      status: false,
      password: [],
      focus: false,
      bankCard: '',
      codes: '',
      // 初版 二维码
      QrCodeUrl: '',
      qrCodeStatus: false,
      // 代付
      thirdPay: false,
      paymentOnBehalf: false
    }
  },
  onLoad (val) {
    this.sn = val.sn
    this.getList()
  },
  methods: {
    clickQrCode_bg () { },
    preservation () {
      let that = this
      uni.authorize({
        scope: 'scope.writePhotosAlbum',
        success () {
          that.saveAlbum()
        }
      })
    },
    saveAlbum () {
      uni.getSetting({
        //获取用户的当前设置
        success: res => {
          if (res.authSetting['scope.writePhotosAlbum']) {
            //验证用户是否授权可以访问相册
            this.saveImageToPhotosAlbum()
          } else {
            uni.authorize({
              //如果没有授权，向用户发起请求
              scope: 'scope.writePhotosAlbum',
              success: () => {
                this.saveImageToPhotosAlbum()
              },
              fail: () => {
                uni.showToast({
                  title: '请打开保存相册权限',
                  icon: 'none',
                  mask: true
                })
              }
            })
          }
        }
      })
    },
    saveImageToPhotosAlbum () {
      let base64 = this.QrCodeUrl.replace(/^data:image\/\w+;base64,/, '') //去掉data:image/png;base64,
      let filePath = wx.env.USER_DATA_PATH + '/hym_pay_qrcode.png'
      let that = this
      uni.getFileSystemManager().writeFile({
        filePath: filePath, //创建一个临时文件名
        data: base64, //写入的文本或二进制数据
        encoding: 'base64', //写入当前文件的字符编码
        success: res => {
          uni.saveImageToPhotosAlbum({
            filePath: filePath,
            success: function (res2) {
              uni.showToast({
                title: '保存成功',
                icon: 'none',
                mask: true
              })
            },
            fail: function (err) {
              uni.showToast({
                title: '保存失败',
                icon: 'none',
                mask: true
              })
            },
            complete: function () {
              that.qrCodeStatus = false
            }
          })
        }
      })
    },
    getQrCode () {
      this.qrCodeStatus = true
      setQrCode('WECHAT', 'NATIVE', {
        clientType: 'WECHAT_MP',
        sn: this.sn,
        orderType: 'ORDER'
      })
        .then(res => {
          if (res.code === 200) {
            // 假设你有一个Base64编码的字符串
            const base64String = res.data
            // 将Base64编码解码为字节数组
            const binaryString = Buffer.from(base64String, 'base64')
            this.QrCodeUrl = `data:image/png;base64,${binaryString.toString('base64')}`
          } else {
            this.qrCodeStatus = false
            uni.showToast({
              title: res.msg,
              icon: 'none',
              mask: true
            })
          }
        })
        .catch(() => {
          this.qrCodeStatus = false
        })
    },
    clickOther () {
      this.focus = false
      setTimeout(() => {
        this.focus = true
      }, 200)
    },
    // 银行转账
    transferred () {
      transferAccountsRemind('BANK_TRANSFER', 'MP', {
        orderType: 'ORDER',
        sn: this.sn
      }).then(res => {
        if (res.code === 200) {
          this.status = false
          uni.showToast({
            icon: 'none',
            title: '已提醒平台,如24小时订单状态未改变,请及时联系客服',
            mask: true
          })
        }
      })
    },
    // 余额支付
    confirmPayment () {
      payment(this.selectPayMethod, 'MP', {
        orderType: 'ORDER',
        sn: this.sn,
        password: this.password.join('')
      }).then(res => {
        // 支付成功 支付成功 支付成功
        if (res.code === 200) {
          uni.showToast({ icon: 'none', title: res.data.msg, mask: true })
        }
        if (res.code === 32001) {
          // 跳详情页
          uni.showToast({ icon: 'none', title: res.data.msg, mask: true })
          uni.navigateTo({ url: '/subpackage/order/orderInfo?sn=' + this.sn })
        }
      })
      this.password = []
    },
    getInput (val) {
      this.password = val.target.value.split('')
    },
    // 支付
    toPay () {
      if (this.selectPayMethod === 'WALLET') {
        if (this.walletBalance.balance > this.order.flowPrice) {
          this.status = true
          this.focus = true
        } else {
          uni.showToast({ icon: 'none', title: '余额不足' })
        }
      }
      if (this.selectPayMethod === 'BANK_TRANSFER') {
        this.status = true
      }
      if (this.selectPayMethod === 'WECHAT') {
        this.wechatPayments()
      }
      if (this.selectPayMethod === 'ALIPAY') {
        this.wechatPayments()
      }
      if (this.selectPayMethod === 'DINPAY') {
        this.polymerizationPays()
        setTimeout(() => { this.payStatus = true }, 3000)
      }
    },
    // 无法支付  点击支付按钮
    payAgain () {
      if (this.selectPayMethod1 === 'WECHAT') {
        this.wechatPayments()
      }
      if (this.selectPayMethod1 === 'ALIPAY') {
        this.wechatPayments()
      }
    },
    payFail () {
      this.payStatus = false
      const checkedVal = this.paymentMethod.find(val => {
        return val.originalMethod == 'WECHAT'
      })
      this.selectCheckOrgin(checkedVal)
    },
    // 选中的支付方式
    selectCheck (val) {
      this.paymentOnBehalf = false
      this.thirdPay = false
      this.paymentType = val.paymentType
      this.paymentMethod.forEach(i => {
        i.checked = false
      })
      JSON.stringify(this.walletBalance) !== '{}' ? (this.walletBalance.checked = false) : ''
      this.selectPayMethod = val.method
      this.$nextTick(() => {
        val.checked = true
      })
      val.thirdPay ? (this.thirdPay = true) : ''
    },
    // 无法支付 选中支付方式
    selectCheckOrgin (val) {
      this.paymentMethod1.forEach(i => {
        i.checked = false
      })
      this.selectPayMethod1 = val.method
      this.$nextTick(() => {
        val.checked = true
      })
    },
    selectThirdPay () {
      this.paymentOnBehalf = true
      uni.navigateTo({ url: '/pages/cashier/paymentOnBehalf?sn=' + this.sn })
    },
    // 获取数据
    getList () {
      // 获取支付方式
      paySuitable({ orderSn: this.sn }).then(res => {
        if (res.code === 200) {
          res.data.forEach(i => {
            this.$set(i, 'checked', false)
            if (i.method !== 'WALLET') {
              this.paymentMethod.push(i)
            } else {
              this.walletBalance = i
            }
            if (i.method === 'BANK_TRANSFER') {
              this.bankCard = i
            }
            if (i.method === 'WECHAT') {
              i.checked = true
              this.selectPayMethod = i.method
              i.thirdPay ? (this.thirdPay = true) : (this.thirdPay = false)
            }
          })
          this.selectCheck(this.paymentMethod[0])

          // if (this.paymentMethod.length === 1) {
          //   this.selectCheck(this.paymentMethod[0])
          // }
        } else {
          uni.switchTab({ url: '/pages/index/index' })
        }
      })
      // 订单信息
      orderDetails(this.sn).then(res => {
        if (res.code === 200) {
          this.order = res.data.order
          if (res.data.payStatusValue === '已付款') {
            uni.navigateTo({ url: '/subpackage/order/orderInfo?sn=' + this.sn })
          }
        }
      })
    },
    // 点击无法支付
    unableToPay () {
      this.paymentMethod1 = []
      paySuitable1({
        orderSn: this.sn
      })
        .then(res => {
          if (res.code === 200) {
            this.isShowUnablePayPopup = true
            res.data.forEach(i => {
              this.$set(i, 'checked', false)
              if (i.method === 'WECHAT' || i.method === 'ALIPAY') {
                this.paymentMethod1.push(i)
              }
              if (i.method === 'WECHAT') {
                i.checked = true
                this.selectPayMethod1 = i.method
              }
            })
            this.selectCheckOrgin(this.paymentMethod1[0])
          } else {
            uni.showToast({
              icon: 'none',
              title: '当前无法使用此支付渠道，请联系客服'
            })
          }
        })
        .catch(() => {
          uni.showToast({
            icon: 'none',
            title: '当前无法使用此支付渠道，请联系客服'
          })
        })
    },
    // 聚合支付
    polymerizationPays () {
      // 支付宝
      // if (this.serviceType === 'receipt_code_pay' || this.serviceType === 'alipay_app_pay') {
      if (this.paymentType === 'ALIPAY') {
        // #ifdef MP
        this.clientType = 'NATIVE'
        // #endif
        // #ifndef MP
        this.clientType = 'APP'
        // #endif
        polymerizationPay('DINPAY', this.clientType, {
          sn: this.sn,
          // serviceType: this.serviceType,
          paymentType: this.paymentType,
          orderType: 'ORDER',
          appPay: true
        }).then(res => {
          if (res.code === 200) {
            // #ifdef MP
            this.qrCodeStatus = true
            this.QrCodeUrl = wxQrcode.createQrCodeImg(res.data)
            // #endif
            // #ifndef MP
            let prepay = res.data
            plus.runtime.openURL(prepay)
            // getAllRequest(prepay).then(r => {
            // })
            // const platform = uni.getSystemInfoSync().osName
            // let alipayUri = ''
            // if (platform === 'android') {
            // alipayUri = 'alipays://platformapi/startapp?appId=20000067&url=' + prepay
            // } else {
            // alipayUri = 'alipay://platformapi/startapp?appId=20000067&url=' + prepay
            // }
            // plus.runtime.openURL(alipayUri)
            // #endif
          }
        })
        return
      }

      // #ifdef MP-WEIXIN
      getWechatCode().then(code => {
        let codes = code
        this.payWechat(codes)
      })
      // #endif
      // #ifndef MP-WEIXIN
      this.payWechat()
      // #endif
    },
    payWechat (codes) {
      // #ifdef MP-WEIXIN
      this.clientType = 'MP'
      // #endif
      // #ifdef MP-TOUTIAO
      this.clientType = 'DOUYIN_MP'
      // #endif
      // #ifndef MP
      this.clientType = 'APP'
      // #endif
      // 微信
      polymerizationPay('DINPAY', this.clientType, {
        sn: this.sn,
        // serviceType: this.serviceType,
        paymentType: this.paymentType,
        orderType: 'ORDER',
        code: codes
      }).then(res => {
        if (res.code === 200) {
          let prepay = ''
          let that = this
          // #ifdef MP
          prepay = JSON.parse(res.data)
          uni.requestPayment({
            provider: 'wxpay', // 服务提提供商
            timeStamp: prepay.timeStamp, // 时间戳
            nonceStr: prepay.nonceStr, // 随机字符串
            package: prepay.package,
            signType: prepay.signType, // 签名算法
            paySign: prepay.paySign, // 签名
            success: res => {
              uni.reLaunch({
                url: '/subpackage/order/orderInfo?sn=' + that.sn
              })
            },
            fail: err => {
              console.log('支付失败', err)
            }
          })
          // #endif
          // #ifndef MP
          prepay = res.data
          plus.share.getServices(res => {
            let sweixin = null
            for (let i in res) {
              if (res[i].id === 'weixin') {
                sweixin = res[i]
              }
            }
            if (sweixin) {
              let a = `pages/pay_index/pay_index?appid=${prepay.appid}&oriaccid=${prepay.oriaccid}&apptype=${prepay.apptype}&prepayid=${prepay.prepayid}&sign=${prepay.sign}`
              sweixin.launchMiniProgram({
                id: prepay.oriaccid,
                type: 0,
                path: a
              })
            } else {
              uni.showToast({
                icon: 'none',
                title: '未安装微信'
              })
            }
          })
          // #endif
        }
      })
    },
    //发起原生支付   支付宝、微信支付
    wechatPayments () {
      let mo = ''
      if (
        this.selectPayMethod === 'WECHAT' ||
        this.selectPayMethod1 === 'WECHAT' ||
        (this.selectPayMethod === 'DINPAY' && this.originalMethod === 'WECHAT')
      ) {
        mo = 'wxpay'
      }
      if (
        this.selectPayMethod === 'ALIPAY' ||
        this.selectPayMethod1 === 'ALIPAY' ||
        (this.selectPayMethod === 'DINPAY' && this.originalMethod === 'ALIPAY')
      ) {
        mo = 'alipay'
      }
      // #ifdef MP-WEIXIN
      bindWechat().then(bindRes => {
        getWechatCode().then(code => {
          this.payWechat2(code, 'wxpay')
        })
      })
      // #endif
      // #ifndef MP-WEIXIN
      this.payWechat2('', mo)
      // #endif
    },
    payWechat2 (code, e) {
      let a = ''
      this.isShowUnablePayPopup ? (a = this.selectPayMethod1) : (a = this.selectPayMethod)
      let that = this
      wechatPayment(a, 'ORDER', this.sn, code).then(response => {
        if (response.code === 200) {
          let weChatPayData = response.data
          console.log(weChatPayData)
          // #ifdef MP-WEIXIN
          uni.requestPayment({
            provider: 'wxpay', // 服务提提供商
            timeStamp: weChatPayData.timeStamp, // 时间戳
            nonceStr: weChatPayData.nonceStr, // 随机字符串
            package: weChatPayData.package,
            signType: weChatPayData.signType, // 签名算法
            paySign: weChatPayData.paySign, // 签名
            success: function (res) {
              uni.navigateTo({
                url: '/subpackage/order/orderInfo?sn=' + that.sn
              })
            },
            fail: function (err) {
              console.log('支付失败', err)
            }
          })
          // #endif
          // #ifndef MP-WEIXIN
          let orderInfo = ''
          if (e === 'alipay') {
            orderInfo = weChatPayData
          }
          if (e === 'wxpay') {
            orderInfo = {
              package: weChatPayData.package,
              appid: weChatPayData.appid,
              sign: weChatPayData.sign, // 签名
              signtype: weChatPayData.signtype, // 签名算法
              partnerid: weChatPayData.partnerid,
              prepayid: weChatPayData.prepayid,
              noncestr: weChatPayData.noncestr, // 随机字符串
              timestamp: weChatPayData.timestamp // 时间戳
            }
          }

          // console.log(weChatPayData)

          uni.requestPayment({
            provider: e, // 服务提提供商
            orderInfo: orderInfo,
            success: function (res) {
              console.log('支付成功', res)
              uni.navigateTo({
                url: '/subpackage/order/orderInfo?sn=' + that.sn
              })
            },
            fail: function (err) {
              console.log('支付失败', err)
            }
          })
          // #endif
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cashier_container {
  width: 100%;
  min-height: 100vh;
  background: #f9f9f9;
  padding-bottom: 66rpx;

  .use {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.3);

    // 钱包支付
    .paymentPassword {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1001;
      width: 100%;
      height: 694rpx;
      background: #ffffff;
      border-radius: 22rpx 22rpx 0rpx 0rpx;

      .title {
        font-size: 36rpx;
        background: #fff;
        text-align: center;
        border-radius: 22rpx 22rpx 0rpx 0rpx;
        margin-top: 56.94rpx;
        position: relative;
        font-size: 29rpx;

        img {
          position: absolute;
          top: 0;
          right: 46.53rpx;
          width: 19.44rpx;
          height: 19.44rpx;
          padding: 20rpx;
        }
      }

      .payable {
        font-size: 42rpx;
        text-align: center;
        margin-top: 49.31rpx;

        text {
          font-size: 83rpx;
        }
      }

      .input {
        color: transparent;
        transform: translateX(-1000%);
      }

      .password {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        padding: 0 97.92rpx;
        margin-top: 37.25rpx;

        // input {
        //   width: 68rpx;
        //   height: 68rpx;
        //   line-height: 67rpx;
        //   font-size: 70rpx;
        //   background: #f9f9f9;
        //   border-radius: 7rpx;
        //   text-align: center;
        // }
        view {
          display: inline-block;
          width: 68rpx;
          height: 68rpx;
          background: #f9f9f9;
          border-radius: 7rpx;

          .dot {
            display: block;
            width: 25rpx;
            height: 25rpx;
            border-radius: 50%;
            background: #000;
            margin-top: 50%;
            margin-left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }

      .confirmPayment {
        width: 554rpx;
        height: 80rpx;
        line-height: 78rpx;
        text-align: center;
        font-size: 29rpx;
        color: #ffffff;
        background: #2871fc;
        border-radius: 40rpx;
        margin: 0 auto;
        margin-top: 137.64rpx;
      }
    }

    // 银行转账
    .bankTransfer {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1001;
      width: 100%;
      height: 694rpx;
      background: #fff;
      border-radius: 22rpx 22rpx 0rpx 0rpx;

      .title {
        font-size: 36rpx;
        text-align: center;
        border-radius: 22rpx 22rpx 0rpx 0rpx;
        padding: 32.64rpx 0;
        position: relative;
        font-size: 36rpx;
        font-weight: bold;
        border-bottom: 1px solid #f9f9f9;

        img {
          position: absolute;
          top: 32rpx;
          right: 46.53rpx;
          width: 19.44rpx;
          height: 19.44rpx;
          padding: 20rpx;
        }
      }

      .accountName,
      .subbranch,
      .account {
        font-size: 29rpx;
        color: #8d8d8d;
        margin: 56.25rpx 0 0 47.92rpx;

        text {
          color: #000;
          margin-left: 34.72rpx;
        }
      }

      .account {
        text {
          color: #ef231b;
        }
      }

      .btn {
        font-size: 29rpx;
        padding: 0 31.25rpx;
        margin-top: 104.44rpx;

        text {
          display: inline-block;
          width: 328rpx;
          height: 80rpx;
          line-height: 78rpx;
          font-size: 29rpx;
          text-align: center;
          color: #ffffff;
          background: #2871fc;
          border-radius: 11rpx;
        }

        text:nth-child(2) {
          margin-left: 31.94rpx;
        }
      }
    }
  }

  .price {
    height: 234.03rpx;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    text:nth-child(1) {
      font-size: 60rpx;
      color: #ef231b;
      font-weight: bold;
    }

    text:nth-child(2) {
      font-size: 28rpx;
      color: #8d8d8d;
      margin-top: 23.61rpx;
    }
  }

  .orderPriceInfo {
    background: #fff;
    margin: 0 25rpx;
    margin-top: 20rpx;
    padding-left: 22.22rpx;
    padding-right: 47.22rpx;
    padding-bottom: 47.22rpx;

    .title {
      display: inline-block;
      font-size: 33rpx;
      font-weight: bold;
      margin: 56.94rpx 0 0;
    }

    .item {
      display: flex;
      justify-content: space-between;
      margin-top: 34.72rpx;
      font-size: 29rpx;

      text:nth-child(1) {
        color: #8d8d8d;
      }

      text:nth-child(2) {
        color: #000;
      }
    }
  }

  .wallet {
    background: #fff;
    margin: 0 25rpx;
    margin-top: 20rpx;
    padding-left: 22rpx;
    padding-bottom: 47rpx;
    font-size: 29rpx;

    .title {
      display: inline-block;
      font-size: 33rpx;
      font-weight: bold;
      margin: 27.78rpx 0 51.39rpx;
    }

    .item {
      display: block;

      image {
        width: 38.89rpx;
        height: 38.89rpx;
        vertical-align: sub;
        margin-right: 22.22rpx;
      }

      .checkbox {
        float: right;
      }
    }
  }

  .paymentMethod {
    background: #fff;
    margin: 0 25rpx;
    margin-top: 20rpx;
    padding-left: 22rpx;
    padding-bottom: 47rpx;
    font-size: 29rpx;

    .title {
      display: inline-block;
      font-size: 33rpx;
      font-weight: bold;
      margin: 56rpx 18rpx 0 7rpx;
    }

    .unable-pay {
      width: 98rpx;
      height: 24rpx;
      font-size: 25rpx;
      color: #2871fc;
    }

    .item {
      display: block;
      height: 50rpx;
      padding-top: 40.22rpx;

      image {
        width: 38.89rpx;
        height: 38.89rpx;
        vertical-align: sub;
        margin-right: 22.22rpx;
      }

      .checkbox {
        float: right;
      }
    }
  }

  .payment-on-behalf {
    height: 108rpx;
    background: #ffffff;
    border-radius: 11rpx;
    margin: 0 25rpx;
    margin-top: 20rpx;
    padding: 0 38rpx 0 27rpx;
    padding-right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 29rpx;
    font-weight: 500;

    image {
      width: 47.22rpx;
      height: 47.22rpx;
    }
  }

  .paymentButton {
    width: 678rpx;
    height: 80rpx;
    line-height: 78rpx;
    text-align: center;
    font-size: 29rpx;
    color: #ffffff;
    background: #2871fc;
    border-radius: 39rpx;
    margin: 0 auto;
    margin-top: 66rpx;
  }

  .QrCode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);

    .QrCode_bg {
      width: 539rpx;
      height: 639rpx;
      background: #ffffff;
      border-radius: 17rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      image {
        width: 387rpx;
        height: 387rpx;
        margin: 79.86rpx 76rpx 39.72rpx;
      }

      .text {
        height: 50rpx;
        line-height: 50rpx;
        font-size: 33rpx;
        font-weight: 500;
        color: #000000;
        text-align: center;

        image {
          width: 29.17rpx;
          height: 29.17rpx;
          margin: 0;
          margin-left: 16.67rpx;
          vertical-align: middle;
        }
      }
    }
  }

  .unable-pay-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }

    .content {
      position: relative;
      z-index: 1000;
      overflow: hidden;
      background: #f9f9f9;
      border-radius: 22rpx 22rpx 0rpx 0rpx;
      width: 100%;
      transition: bottom 0.3s ease-out;

      .title {
        padding: 34rpx 0;
        width: 100%;
        text-align: center;
        font-size: 36rpx;
        font-weight: 600;
        color: #000000;
        background-color: #fff;
      }

      .pay-method {
        padding: 20rpx 26rpx;

        .pay-list {
          background: #ffffff;
          border-radius: 22rpx;
          padding: 50rpx 0 0 22rpx;
          margin-bottom: 180rpx;

          .tips {
            width: 508rpx;
            height: 28rpx;
            font-size: 29rpx;
            color: #ef231b;
            margin-bottom: 45rpx;
          }

          // .list {
          // 	margin-bottom: 46rpx;
          // }

          .item {
            display: block;
            height: 50rpx;
            padding-bottom: 46rpx;

            image {
              width: 38rpx;
              height: 38rpx;
              vertical-align: sub;
              margin-right: 22rpx;
            }

            .checkbox {
              float: right;
            }
          }
        }
      }

      .btn {
        width: 678rpx;
        height: 80rpx;
        background: #2871fc;
        border-radius: 39rpx;
        text-align: center;
        font-size: 29rpx;
        color: #ffffff;
        line-height: 80rpx;
        margin: 0 auto;
      }
    }
  }
}
</style>
